<template>
	<view style="height: 100vh;">
		<search-model @doSearch="handleSearch"></search-model>
		<map :scale="20" style="width: 100%; height: calc(100% - 300rpx);" :latitude="latitude" :longitude="longitude"
			:markers="markers" @callouttap="handleCallout"></map>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {onLoad} from '@dcloudio/uni-app'
	const latitude = ref(39.909)
	const longitude = ref(116.39742)
	const markers = ref([])
	const doLocation = ({lat, long}) => {
		if(!lat || !long) {
			uni.getLocation({
				isHighAccuracy: true,
				success: function(res) {
					console.log(res)
					// longitude.value = 39.909
					// latitude.value = 39.909
					markers.value = [{
						id: 0,
						longitude: longitude.value,
						latitude: latitude.value,
						title: '中心',
						width: 20,
						height: 35
					}]
					getHouse()
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				},
				fail: function(err) {
					console.log(err)
				}
			})
		} else {
			markers.value = [{
				id: 0,
				longitude: long,
				latitude: lat,
				title: '中心',
				width: 20,
				height: 35
			}]
			getHouse()
		}
		
	}
	const handleCallout  =(e) => {
		console.log(e.detail)
		uni.navigateTo({
			url:`/pagesB/detail/detail?id=${e.detail.markerId}`
		})
	}
	// doLocation()
	const pageInfo = reactive({
		pageNum: 1,
		pageSize: 7
	})
	const houseList = ref([])
	const getHouse = async () => {
		// if(!isHasMore.value) {return}
		const res = await uniCloud.callFunction({
			name: 'list',
			data: {
				pageNum: pageInfo.pageNum,
				pageSize: pageInfo.pageSize
			}
		})
		const {
			data,
			hasMore
		} = res.result
		uni.stopPullDownRefresh()
		// isHasMore.value = hasMore
		houseList.value = [...houseList.value, ...data]
		const markerArr = houseList.value.map((item, index) => {
			return {
				id: item._id,
				latitude: item.latitude || 39.90,
				longitude: item.longitude || 116.39,
				width: 0,
				height: 0,
				callout: {
					display: 'ALWAYS',
					content: `${item.localName} \n ${item.unitPrice}元`,
					color: '#fff',
					textAlign: 'center',
					bgColor: '#42B984',
					padding: 10,
					borderRadius: 8,
					anchorY: 5,
				}
			}
		})
		markers.value = [...markers.value, ...markerArr]
		console.log(markers.value)
	}
	const handleSearch = (res) => {
		latitude.value = res.latitude
		longitude.value = res.longitude
		doLocation({lat:latitude, long: longitude})
	}
	onLoad(() => {
		doLocation({})
	})
</script>

<style>

</style>